<script setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router'
import { ref } from 'vue'


const route = useRoute()
const name = route.query.name
const id = route.query.id

const router = useRouter()
 



function go() {

  router.push({ path: "/home/person" ,query:{id:id,name:name}});
  
}
function add() {
  router.push({ path: "/home/add" ,query:{name:name}});
}
function layout() {
  router.push({ path: "/" });
}
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("so").style.left = "320px";
  document.getElementById("just").style.width = "1100px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("so").style.left = "140px";
  document.getElementById("just").style.width = "1300px";
}
// function getInfo(value){
//   this.router.push({
//     path:'/',
//     query:{
//       id:value.id,
//       name:value.name
//     }
//   })
//   .catch(err=>{
//     console.log(err)
//   })
// }
</script>

<template>
  <div class="common-layout">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" @click="closeNav"
        >&times;</a
      >

      <router-link :to="{path:'/home/',query:{id:id,name:name}}" >首页</router-link>
      <router-link :to="{path:'/home/match',query:{id:id,name:name}}"  >竞赛</router-link>
      <router-link :to="{path:'/home/certificate',query:{id:id,name:name}}" >证书</router-link>
      <router-link :to="{path:'/home/bonus',query:{id:id,name:name}}" >奖学金</router-link>
      <router-link :to="{path:'/home/project',query:{id:id,name:name}}"  >项目经历</router-link>
      <router-link :to="{path:'/home/practice',query:{id:id,name:name}}"  >实习经历</router-link>
      <router-link :to="{path:'/home/paper',query:{id:id,name:name}}"  >论文发表</router-link>
      <router-link :to="{path:'/home/person',query:{id:id,name:name}}"  >个人信息</router-link>
      
    </div>
    <div id="main"></div>
    <nav id="nav">
      <span
        style="
          font-size: 30px;
          cursor: pointer;
          position: fixed;
          top: 5px;
          left: 320px;
        "
        @click="openNav"
        id="so"
        >&#9776;
      </span>
      <el-dropdown
        style="position: fixed; top: 10px; right: 40px; font-size: 23px"
      >
        <span class="el-dropdown-link">
          姓名：{{ name }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="add">添加奖项</el-dropdown-item>
            <el-dropdown-item @click="go">个人信息</el-dropdown-item>
            <el-dropdown-item @click="layout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </nav>

    <div id="just">


      <router-view />


    </div>
  </div>
</template>

<style scoped>
#just {
  width: 1100px;
  height: 600px;
  border: 1px solid black;
  position: fixed;
  top: 80px;
  right: 100px;
}
#nav {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  background-color: rgba(0, 166, 255, 0.112);
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.sidenav {
  height: 100%;
  width: 250px; /*初始宽度=0不显示内容*/
  background-color: #111;
  padding-top: 30px;
  overflow-x: hidden; /*x轴溢出处理*/
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  transition: 0.5s; /*过渡动画*/
}
.sidenav a:link,
.sidenav a:visited {
  text-decoration: none;
  display: block; /*块级元素*/
  padding: 8px 8px 8px 32px;
  font-size: 20px;
  color: #818181;
  transition: 0.3s; /*过渡动画*/
}
.sidenav a:hover,
.sidenav a:active {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0px;
  right: 5px;
  font-size: 20px;
}
#main {
  transition: margin-left 0.5s; /*过渡动画*/
  padding: 16px;
}
</style>
